<template>
  <div class="points">
    <van-nav-bar title="我的积分" left-arrow @click-left="goBack" />
    <van-cell-group>
      <van-cell title="当前积分" value="12345" />
    </van-cell-group>
    <van-divider>积分记录</van-divider>
    <van-list>
      <div v-for="item in pointsRecords" :key="item.id" class="points-item">
        <van-cell :title="item.reason" :label="item.date" :value="item.value" />
      </div>
    </van-list>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const goBack = () => {
  router.back()
}

const pointsRecords = ref([
  { id: 1, reason: '购物奖励', date: '2024-11-20', value: '+500' },
  { id: 2, reason: '每日签到', date: '2024-11-19', value: '+50' },
  { id: 3, reason: '退货扣减', date: '2024-11-18', value: '-200' },
])
</script>

<style scoped>
.points-item {
  margin-bottom: 10px;
}
</style>
